<script setup lang="ts">
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import application from "@/router/modules/application";
import metaTable from "@/router/modules/metaTable";
import system from "@/router/modules/system";

defineOptions({
  name: "DevopelHome"
});
const router = useRouter();
// const productList = ref([
//   {
//     sysClassInfo: {
//       id: 125,
//       className: "元表管理",
//       parentId: 0,
//       classSort: 1,
//       status: 1,
//       classIcon: "ep:avatar",
//       classTypeID: 2,
//       addTime: "2023-12-05 18:15:51"
//     },
//     appInfos: [
//       {
//         id: 83,
//         appImage: "ep:avatar",
//         appName: "分类管理",
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0,
//         appPath: "/metaTable/index"
//       },
//       {
//         id: 97,
//         appImage: "ep:bell-filled",
//         appName: "元表管理",
//         appPath: "/metaTable/metaTableInfo",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: true,
//         useCount: 0
//       }
//     ]
//   },
//   {
//     sysClassInfo: {
//       id: 135,
//       className: "应用管理",
//       parentId: 0,
//       classSort: 3,
//       status: 1,
//       classIcon: "ep:coin",
//       classTypeID: 2,
//       addTime: "2024-04-16 10:49:44"
//     },
//     appInfos: [
//       {
//         id: 96,
//         appImage: "ep:briefcase",
//         appName: "分类管理",
//         appPath: "/application/appClass/index",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: true,
//         useCount: 0
//       },
//       {
//         id: 104,
//         appImage: "ep:document-copy",
//         appName: "应用设计",
//         appPath: "/application/appInfo/index",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       }
//     ]
//   },
//   {
//     sysClassInfo: {
//       id: 127,
//       className: "系统设置",
//       parentId: 0,
//       classSort: 2,
//       status: 1,
//       classIcon: "ep:bowl",
//       classTypeID: 2,
//       addTime: "2023-12-05 21:30:56"
//     },
//     appInfos: [
//       {
//         id: 106,
//         appImage: "ep:warning",
//         appName: "图标设置",
//         appPath: "/system/index",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       },
//       {
//         id: 107,
//         appImage: "ep:mic",
//         appName: "角色管理",
//         appPath: "/system/roles",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       },
//       {
//         id: 117,
//         appImage: "ep:brush",
//         appName: "参数配置",
//         appPath: "weiXinConfig/index",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       },
//       {
//         id: 122,
//         appImage: "fa:angle-double-up",
//         appName: "数据备份",
//         appPath: "/system/databackup",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       },
//       {
//         id: 123,
//         appImage: "ep:bell",
//         appName: "微信消息模板",
//         appPath: "/system/weichatconfig",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       },
//       {
//         id: 123,
//         appImage: "ep:bowl",
//         appName: "系统日志",
//         appPath: "/system/systemlog",
//         appType: 1,
//         isWebShow: true,
//         isPhoneShow: true,
//         isIndexShow: false,
//         useCount: 0
//       }
//     ]
//   }
// ]);
onMounted(() => {
  console.log("myApp", application);
});
const jumprouter = appPath => {
  router.push(appPath);
};
</script>

<template>
  <div>
    <!--元表管理-->
    <div class="myDiv">
      <div style="min-width: 800px">
        <span style="font-size: 16px; font-weight: bold">{{
          metaTable.meta.title
        }}</span>
        <el-row :gutter="10" style="margin-top: 10px">
          <el-col
            v-for="(item, key) in metaTable.children"
            :key="key"
            :span="5"
          >
            <div
              @click="jumprouter(item.path)"
              class="myCard"
              v-if="item.meta.showLink != false"
            >
              <div class="tpTitle">
                <IconifyIconOnline
                  :icon="item.meta.icon"
                  width="30px"
                  height="30px"
                  style="color: #409eff"
                />
                <div class="mainTitle">
                  <div class="box">
                    {{ item.meta.title }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--应用管理-->
    <div class="myDiv">
      <div style="min-width: 800px">
        <span style="font-size: 16px; font-weight: bold">{{
          application.meta.title
        }}</span>
        <el-row :gutter="10" style="margin-top: 10px">
          <el-col
            v-for="(item, key) in application.children"
            :key="key"
            :span="5"
          >
            <div
              @click="jumprouter(item.path)"
              class="myCard"
              v-if="item.meta.showLink != false"
            >
              <div class="tpTitle">
                <IconifyIconOnline
                  :icon="item.meta.icon"
                  width="30px"
                  height="30px"
                  style="color: #409eff"
                />
                <div class="mainTitle">
                  <div class="box">
                    {{ item.meta.title }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--系统设置-->
    <div class="myDiv">
      <div style="min-width: 800px">
        <span style="font-size: 16px; font-weight: bold">{{
          system.meta.title
        }}</span>
        <el-row :gutter="10" style="margin-top: 10px">
          <el-col v-for="(item, key) in system.children" :key="key" :span="5">
            <div
              @click="jumprouter(item.path)"
              class="myCard"
              v-if="item.meta.showLink != false"
            >
              <div class="tpTitle">
                <IconifyIconOnline
                  :icon="item.meta.icon"
                  width="30px"
                  height="30px"
                  style="color: #409eff"
                />
                <div class="mainTitle">
                  <div class="box">
                    {{ item.meta.title }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style scoped>
.myCard:hover {
  background-color: rgb(212 208 208 / 60%);
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpTitle {
  display: flex;
  flex-direction: row;
  line-height: 30px;
}

.myCard {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  height: 50px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #d8d5d5;
  border-radius: 10px;
}

.btTitle {
  margin-top: 10px;
  margin-left: 5px;
  overflow: hidden; /* 超出部分隐藏 */
  font-size: 12px;
  color: #616060;
  text-overflow: ellipsis; /* 使用省略符号 */
  white-space: nowrap; /* 文本不换行 */
}

.myDiv {
  padding: 10px;
}

.mainTitle {
  width: 100%;
  padding: 0 10px;
}

.box {
  height: 15px;
  margin-bottom: 8px;
  font-weight: bold;
  border: 0;
}
</style>
